<!-- eslint-disable prettier/prettier -->
<!-- BarChart.vue -->
<template>
  <div ref="chartRef" class="chart-box"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

const chartRef = ref(null)
let chart = null

// 1. 准备数据
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]

const initChart = () => {
  // 2. 创建 Chart 实例
  chart = new Chart({
    container: chartRef.value,
    autoFit: true, // 宽度跟随父元素
    // height: 300,
    theme: 'dark'
  })

  // 3. 载入数据
  chart.data(data)

  // 4. 声明图形语法：柱状图
  chart
    .interval() // 几何图形：柱
    .encode('x', 'genre') // x 轴：类别
    .encode('y', 'sold') // y 轴：数值
    .encode('color', 'genre') // 按类别分色
    .axis('y', {
      label: {
        formatter: (v) => `${v} 份`,
        style: {
          fill: '#ff0000', // 红色
          fontSize: 14,
          fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
        }
      }
    })
    .axis('x', {
      label: {
        style: {
          fill: '#ff0000', // 红色
          fontSize: 14,
          fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
        }
      }
    })

  // 设置坐标轴样式
  chart.axis('genre', {
    label: {
      style: {
        fill: '#ff0000',
        fontSize: 14,
        fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
      }
    }
  })

  chart.axis('sold', {
    label: {
      formatter: (val) => `${val} 份`,
      style: {
        fill: '#ff0000',
        fontSize: 14,
        fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif'
      }
    }
  })

  // 5. 渲染
  chart.render()
}

onMounted(() => {
  initChart()
})

let resizeTimer = null
const handleResize = () => {

  chart.destroy()
  // chart.resize()
  // 清除之前的定时器
  if (resizeTimer) {
    clearTimeout(resizeTimer)
  }
  
  // 设置新的定时器，2秒后执行initChart
  resizeTimer = setTimeout(() => {
    initChart()
  }, 2000)
}

// 3. 在组件挂载时添加窗口大小变化监听
onMounted(() => {
  // 初始化图表
  handleResize()

  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
})

// 4. 在组件卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  // if (resizeTimer) {
  //   clearTimeout(resizeTimer)
  // }
  // if (chartInstance) {
  //   chartInstance.dispose()
  // }
})
</script>

<style scoped>

.chart-box {
  width: 96%;
  height: 96%;
  /* background: #fff; */
  /* margin-top: 20px; */
  /* height: calc(100% - 1px); */
  /* flex: 1; 剩余高度全给图表 */
  /* min-height: 0; 防止 flex 子项溢出 */
  /* padding: 30px; */
  /* width: calc(80% - 20px); 整屏高度 */
  /* overflow: hidden; */
}
</style>
